<template>
    <div>
        <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
        <my-button-frame>
            <div class="d-inline-block">
                <my-new-category-btn @new-category-success="getCategoryList()"></my-new-category-btn>
            </div>
        </my-button-frame>
        <my-no-results-text v-if="categoryList.length === 0" :text="'你还没有创建过分类哦'"></my-no-results-text>
        <my-category-list
                v-else
                :category-list="categoryList"
                @reset-category-list="getCategoryList()"
        ></my-category-list>
    </div>
</template>

<script>
    import MyNewCategoryBtn from "./MyNewCategoryBtn";
    import MyButtonFrame from "../../common/MyButtonFrame";
    import MyLoadingOverlay from "../../common/MyLoadingOverlay";
    import MyCategoryList from "./MyCategoryList";
    import MyNoResultsText from "../../common/MyNoResultsText";
    export default {
        name: "Category",
        components: {MyNoResultsText, MyCategoryList, MyLoadingOverlay, MyNewCategoryBtn, MyButtonFrame},
        created() {
            this.getCategoryList();
        },
        data() {
            return {
                loadingOverlay: false,
                categoryList: []
            }
        },
        methods: {
            getCategoryList() {
                let _this = this;
                _this.loadingOverlay = true
                _this._get({
                    url: 'system/collection/get-category-list'
                }).then(rsp => {
                    _this.categoryList = rsp.data;
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            }
        }
    }
</script>

<style scoped>

</style>